<script setup>
import { onMounted, ref } from 'vue'
defineOptions({
  name: 'FiveGold'
})
const fiveGold = ref(null)
const hand = ref(false)
onMounted(() => {
  window.addEventListener('scroll', () => {
    if (!fiveGold.value) return
    if (window.scrollY > fiveGold.value.offsetTop / 2) {
      hand.value = true
    }
  })
})
</script>

<template>
  <div class="row" ref="fiveGold">
    <TransitionGroup :duration="2500">
      <div
        key="1"
        class="col-12 col-lg-4 d-flex flex-column justify-content-between"
      >
        <Transition appear :style="{ '--delay': '0.3s' }">
          <div
            class="card d-flex p-3 py-4 flex-row justify-content-start align-items-center"
            v-if="hand"
          >
            <div class="mx-4">
              <img
                src="@/assets/img/dianji_jiaoqiman.png"
                class="img-fluid"
                alt=""
              />
            </div>
            <div class="">
              <h4>交期慢</h4>
              <p>交期一拖再拖，影响进度<br />规格单一，配合速度慢</p>
            </div>
          </div>
        </Transition>
        <Transition appear :style="{ '--delay': '0.6s' }">
          <div
            class="card d-flex p-3 py-4 flex-row justify-content-start align-items-center"
            v-if="hand"
          >
            <div class="mx-4">
              <img
                src="@/assets/img/dianji_tiliangxiao.png"
                class="img-fluid"
                alt=""
              />
            </div>
            <div class="">
              <h4>体量小</h4>
              <p>
                无证厂家，生产规模小 <br />
                服务不全，没有保障
              </p>
            </div>
          </div>
        </Transition>
      </div>
      <div key="2" class="col-lg-4 d-none d-lg-block">
        <Transition appear :style="{ '--delay': '0s' }"
          ><img
            src="@/assets/img/renwu.png"
            class="d-block mx-auto"
            v-if="hand"
            alt=""
          />
        </Transition>
      </div>
      <div
        key="3"
        class="col-12 col-lg-4 d-flex flex-column justify-content-between"
      >
        <Transition appear :style="{ '--delay': '0.9s' }">
          <div
            class="card d-flex p-3 py-4 flex-row justify-content-start align-items-center"
            v-if="hand"
          >
            <div class="mx-4">
              <img
                src="@/assets/img/dianji_chajiagao.png"
                class="img-fluid"
                alt=""
              />
            </div>
            <div class="">
              <h4>差价高</h4>
              <p>
                产品品类少，采购不齐全 <br />
                中间商转手，性价比低
              </p>
            </div>
          </div>
        </Transition>
        <Transition appear :style="{ '--delay': '1.2s' }">
          <div
            class="card d-flex p-3 py-4 flex-row justify-content-start align-items-center"
            v-if="hand"
          >
            <div class="mx-4">
              <img
                src="@/assets/img/dianji_zhiliangcha.png"
                class="img-fluid"
                alt=""
              />
            </div>
            <div class="">
              <h4>质量差</h4>
              <p>
                产品原材渠道混乱没保障 <br />
                品控要求不严，瑕疵多
              </p>
            </div>
          </div>
        </Transition>
      </div>
    </TransitionGroup>
  </div>
</template>

<style scoped lang="scss">
.col-12 {
  img {
    filter: brightness(0.3);
    transition: 0.5s;
  }
}
.card {
  position: relative;
  transition: 0.5s;
  cursor: pointer;
  & > * {
    z-index: 5;
  }
  &:hover {
    color: white;
    img {
      filter: brightness(1);
    }
    p {
      color: white;
    }
  }
  &::after {
    content: '';
    background-color: #104094;
    width: 0%;
    height: 100%;
    left: 0;
    position: absolute;
    z-index: 2;
    transition: 0.5s;
  }
  &:hover::after {
    width: 100%;
  }
}
.v-enter-from {
  opacity: 0;
  top: 50px;
  transition-delay: var(--delay);
}
.v-enter-to {
  opacity: 1;
  top: 0px;
  transition: 0.5s;
  transition-delay: var(--delay);
}
</style>
